<template>
  <!-- 地址选择 -->
  <div class="dizhi">
    <div class="tob" @click="tchu">
      <div class="imgs">
        <img src="../assets/syb.png" alt="" />
      </div>
      <div class="text">收货地址</div>
    </div>
    <van-address-edit
      :area-list="areaList"
      :address-info="AddressInfo"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </div>
</template>

<script>
import API from "../http/API.js";
import { AddressEdit } from "vant";
import { Toast } from "vant";
export default {
  name: "diazxuanz",
  components: {
    [AddressEdit.name]: AddressEdit,
    [Toast.name]: Toast,
  },
  data() {
    return {
      areaList: {
        province_list: {
          110000: "北京",
          120000: "天津市",
        },
        city_list: {
          110100: "北京市",
          110200: "县",
          120100: "天津市",
          120200: "县",
        },
        county_list: {
          110101: "东城区",
          110102: "西城区",
          110105: "朝阳区",
          110106: "丰台区",
          120101: "和平区",
          120102: "河东区",
          120103: "河西区",
          120104: "南开区",
          120105: "河北区",
        },
      },
      searchResult: [],

      // key	说明	类型
      // id	每条地址的唯一标识	number | string
      // name	收货人姓名	string
      // tel	收货人手机号	string
      // province	省份	string
      // city	城市	string
      // county	区县	string
      // addressDetail	详细地址	string
      // areaCode	地区编码，通过省市区选择获取（必填）	string
      // postalCode	邮政编码	string
      // isDefault	是否为默认地址

      AddressInfo: {
        key: "编辑",
        id: "",
        name: "",
        tel: "",
        province: "",
        city: "",
        county: "",
        addressDetail: "",
        areaCode: "",
        postalCode: "",
        isDefault: "",
      },
      //  options:
      // 这个是拿来判断要进行更改收货地址的还是添加的flass是进行进行保存true进行更改的
    };
  },
  created() {
    this.mins();
  },
  methods: {
    // 进行接收参数
    mins() {
      console.log(this.$route.params);
      this.AddressInfo.name = this.$route.params.datas.name;
      this.AddressInfo.tel = this.$route.params.datas.tel;
      this.AddressInfo.isDefault = this.$route.params.datas.isDefault;
      this.AddressInfo.id = this.$route.params.datas.id;
      //  如果有id传过来就让他进行
    },
    onSave(content) {
      // 点击保存
      console.log(content);
      let a = false;
      this.$post(API.POST_ADDRESS_SAVE, {
        // 请求方式：post
        // 参数：
        // ①封装 token
        // ②name：收货人姓名
        // ③tel：电话
        // ④province：省
        // ⑤city：市
        // ⑥county：区
        // ⑦addressDetail：详细地址
        // ⑧isDefault：是否默认
        token: localStorage.getItem("token"),
        name: content.name,
        tel: content.tel,
        province: content.province,
        city: content.city,
        county: content.county,
        addressDetail: content.addressDetail,
        isDefault: content.isDefault,
      }).then((res) => {
        if (res.errmsg == "成功") {
          Toast({
            message: "保存成功",
            position: "top",
          });
        }
        console.log(res);
      });
    },
    onDelete(e) {
      //       ①封装 token
      // ②id：地址 id
      console.log(e.id);
      this.$post(API.POST_ADDRESS_DELETE, {
        token: this.$store.state.token,
        id: e.id,
      }).then((res) => {
        if (res.errmsg == "成功") {
          Toast("删除成功");
        }
      });
    },
    onChangeDetail(val) {
      // 模拟数据
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
    tchu() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.dizhi {
  height: 100%;
  background-color: @background;
}
// .tob {
//   width: 100%;
//   height: 50px;
//   border: 1px solid #000;
//   background-color: rgb(255, 255, 255);
// }
.tob {
  height: 50px;
  display: flex;
  align-items: center;
  .sj();
  .text {
    margin-left: 5px;
    margin-top: 3px;
    font-size: 17px;
  }
}
.imgs {
  width: 20px;
  height: 20px;
  // border: 1px solid #000;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>